<!--  -->
<template>
  <div>
    <div class="flow-container">
      <span v-for="(item,index) in ApproveTimeline ">

        <el-popover
          placement="top-start"
          title="审核意见"
          width="200"
          trigger="hover"
          :content=" item.approveContents&&item.approveContents.approveContent"
        >

          <div :class="getclass(index)" slot="reference">
            <div class="flow-item-top">
              <div class="flow-item-nodeName">{{ item.nodeName }}</div>
            </div>
            <div class="flow-item-line" v-if="item.finishTime">

              <div class="flow-item-line-left flow-item-line-checked" />
              <i class="el-icon-success" style="font-size:16px;color:#267beb" />
              <div class="flow-item-line-right flow-item-line-checked" />
            </div>

            <div class="flow-item-line" v-else-if="item.approveContents">

              <div class="flow-item-line-left flow-item-line-wait" />
              <div class="flow-item-middle-wait" />
              <div class="flow-item-line-right" />
            </div>

            <div class="flow-item-line" v-else>

              <div class="flow-item-line-left" />
              <div class="flow-item-middle-wait" />
              <div class="flow-item-line-right" />
            </div>

            <div class="flow-item-bottom">
              <div class="flow-item-name">
                {{ getname(item) }}</div>
              <div class="flow-item-edit"><!----></div>
            </div>
            <div class="flow-item-time">{{ (item.finishTime||'').split(' ')[0] }}</div>

          </div>

        </el-popover>
      </span>
    </div>
  </div>
</template>

<script>
import {

  findActivityNodes,

} from '@/api/activiti/processTask'
export default {
  name: 'FlowChartLine',
  components: {},
  props: ['processInstanceId'],
  data () {
  return {
    ApproveTimeline: [],
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
    this.activitynodes()
  },
  methods: {
        getclass (index) {
       if (index == 0) {
            return 'flow-item flow-item-start'
       }
       if (index == this.ApproveTimeline.length - 1) {
       return 'flow-item flow-item-end '
       }
       return 'flow-item'
    },
    getname (item) {
       if (item.approveContents) {
     return item.approveContents.approverName
}
    },

      activitynodes () {
           findActivityNodes({
        processInstanceId: this.processInstanceId,
      }).then((response) => {
        this.ApproveTimeline = response.data.data
        console.log('shijianrenwu线', this.ApproveTimeline)
      })
    },
  },
}

</script>
<style lang='css' scoped>
.flow-container .flow-item {
    float: left;
    margin-top: 5px;
    padding-bottom: 10px;
    min-width: 110px;
    max-width: 150px;
}

.flow-container .flow-item .flow-item-nodeName {
	font-size:14px;
	color:#323232;
	font-weight:700;
	padding:0 2px;
  text-align: center;

}
.flow-container .flow-hide {
	display:none
}
.flow-container .flow-item-line {
	width:100%;
	height:20px;
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	margin:5px 0 5px
}
.flow-container .flow-item-line .flow-item-line-left,.flow-container .flow-item-line .flow-item-line-right {
	-webkit-box-flex:1;
	-webkit-flex:1 0 auto;
	-ms-flex:1 0 auto;
	flex:1 0 auto;
	background-color:#ddd;
	height:2px;
	margin-top:8px
}
.flow-container .flow-item-line .flow-item-line-checked {
	background-color:#267beb
}
.flow-container .flow-item-line .flow-item-line-back {
	background-color:#df3d3e
}
.flow-container .flow-item-line .flow-item-line-wait {
	background-color:#87beff
}
.flow-container .flow-item-line .icon-choose {
	color:#267beb
}
.flow-container .flow-item-line .icon-guanbi1 {
	color:#df3d3e
}
.flow-container .flow-item-line .flow-item-middle-skip {
	border-radius:50%;
	font-size:10px;
	-webkit-box-flex:0;
	-webkit-flex:0 0 auto;
	-ms-flex:0 0 auto;
	flex:0 0 auto;
	background-color:#267beb;
	width:10px;
	height:10px;
	margin:5px 0
}
.flow-container .flow-item-line .flow-item-middle-wait {
	border-radius:50%;
	font-size:14px;
	-webkit-box-flex:0;
	-webkit-flex:0 0 auto;
	-ms-flex:0 0 auto;
	flex:0 0 auto;
	border:2px solid #87beff;
	width:14px;
	height:14px;
	margin:3px 0
}
.flow-container .flow-item-line .flow-item-middle-notStart {
	border-radius:50%;
	font-size:14px;
	-webkit-box-flex:0;
	-webkit-flex:0 0 auto;
	-ms-flex:0 0 auto;
	flex:0 0 auto;
	border:2px solid #ddd;
	width:14px;
	height:14px;
	margin:3px 0
}
.flow-container .flow-item-line-ext {
	width:5px;
	float:left;
	background-color:#ddd;
	height:2px;
	margin-top:54px
}
.flow-container .flow-item-line-ext.flow-item-line-checked {
	background-color:#267beb
}
.flow-container .flow-item-line-ext.flow-item-line-back {
	background-color:#df3d3e
}
.flow-container .flow-item-line-ext.flow-item-line-wait {
	background-color:#87beff
}
.flow-container .flow-item-bottom {
	height:19px;
	text-align:center;
	width:100%;
	padding:0 8px;
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex
}
.flow-container .flow-item-bottom .flow-item-name {
	-webkit-box-flex:1;
	-webkit-flex:1 1 auto;
	-ms-flex:1 1 auto;
	flex:1 1 auto;
	text-align:right;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis
}
.flow-container .flow-item-bottom .flow-item-name-wait {
	color:#eb9c26
}
.flow-container .flow-item-bottom .flow-item-edit {
	-webkit-box-flex:1;
	-webkit-flex:1 0 auto;
	-ms-flex:1 0 auto;
	flex:1 0 auto;
	text-align:left;
	margin-left:2px
}
.flow-container .flow-item-bottom .icon-edit {
	color:#267beb;
	cursor:pointer
}
.flow-container .flow-item-time {
	height:18px;
	font-size:14px;
	color:#909090;
	text-align:center
}
.flow-container .flow-item-start {
	min-width:90px;
	margin-left:-20px
}
.flow-container .flow-item-start .flow-item-line-left {
	background-color:transparent
}
.flow-container .flow-item-end {
	min-width:90px
}
.flow-container .flow-item-end .flow-item-line-right {
	background-color:transparent
}
.flow-container .flow-item-children-end,.flow-container .flow-item-children-only,.flow-container .flow-item-children-start,.flow-container .flow-item-children {
	border:2px dashed #87beff;
	margin-top:3px
}
.flow-container .flow-item-children-end .flow-item-top,.flow-container .flow-item-children-only .flow-item-top,.flow-container .flow-item-children-start .flow-item-top,.flow-container .flow-item-children .flow-item-top {
	height:40px
}
.flow-container .flow-item-children-end .flow-item-line,.flow-container .flow-item-children-only .flow-item-line,.flow-container .flow-item-children-start .flow-item-line,.flow-container .flow-item-children .flow-item-line {
	margin-top:0
}
.flow-container .flow-item-children-start {
	border-right:0;
	border-radius:8px 0 0 8px
}
.flow-container .flow-item-children {
	border-left:0;
	border-right:0
}
.flow-container .flow-item-children-end {
	border-left:0;
	border-radius:0 8px 8px 0
}
.flow-container .flow-item-children-only {
	border:2px dashed #87beff;
	margin-top:3px;
	border-radius:8px
}
</style>
